<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        div{
            /* 1、把父元素设置为弹性盒子布局的容器 */
            /* 2、这样每个子元素都是一个弹性盒子布局的项目 */
            /* 3、这样每个子元素的显示模式都改变了 */
            /* 4、当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性都失效。 */
            /* 5、flex 布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 */
            display: flex;
            width: 1200px;
            height: 600px;
            background-color: pink;
            /* 设置主轴的方向  默认值 row 从左往右 */
            flex-direction: row;
            /* 设置主轴上的子元素排列方式 默认值 flex-strat 开始的位置*/
            justify-content: flex-start;
            /* 设置是否换行 默认值 nowrap 不换行 */
            flex-wrap: wrap;
            /*  设置侧轴上的子元素排列方式（单行 ） 拉伸子元素不能设置高度 */
            /* align-items: stretch; */
            align-content: flex-start;
            /* flex-flow: row wrap; */
        }
        div span{
            width: 300px;
            height: 200px;
            margin: 5px;
            background-color: purple;
            color: wheat;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>